﻿<!DOCTYPE html>
<html>
<head>
    <title>五子棋</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='/css/game.css') }}" />
</head>
<body>
    <div class="board"></div>
    <button id="audio_button">语音输入</button>

    <script type="text/javascript" src="../static/js/jquery-3.6.4.min.js"></script>
    <script>
        var currentPlayer = 'black'
        let board = document.querySelector('.board')
        let squares = []

        for (let i = 0; i < 225; i++) {

            let square = document.createElement('div');
            square.classList.add('square');
            square.dataset.index = i;
            square.addEventListener('click', () => {
                let index = parseInt(square.dataset.index)

                if (square.children.length > 0) {
                    alert('有棋子了')
                }
                else {
                    let chess = document.createElement('div')
                    chess.classList.add('chess')
                    square.appendChild(chess);
                    if (currentPlayer === 'black') {
                        chess.classList.add('black')
                        currentPlayer = 'white'
                    } else {
                        chess.classList.add('white')
                        currentPlayer = 'black'
                    }
                    checkWin(index)

                }
            });
            squares.push(square);
            board.appendChild(square);
        }

        let audioButton = document.getElementById('audio_button')
        audioButton.addEventListener('click', () => {
            $.ajax({
                url: "/user/game",
                method: "POST",
                // 发送请求成功
                success: function (result) {
                    // 棋子的index
                    if (result[0] == -1) {
                        alert('请重新输入')
                    }
                    else {
                        let index = (result[0] - 1) * 15 + (result[1] - 1)
                        if (squares[index].children.length > 0) {
                            alert('有棋子了')
                        } else {
                            let che = document.createElement('div')
                            che.classList.add('chess')
                            squares[index].appendChild(che);
                            if (currentPlayer === 'black') {
                                che.classList.add('black')
                                currentPlayer = 'white'
                            } else {
                                che.classList.add('white')
                                currentPlayer = 'black'
                            }
                            checkWin(index)
                        }
                       
                    }
                    

                    
                },
            })
        })


        function checkWin(index) {
            if (checkLine(index)) {
                announce()
            }
            // console.log(squares[index].children[0].classList[1])

        }

        /**
         * 判断用户是否某一行是否连接成五个
         *
         * @param {a} 需要检查的位置
         * @returns 落子之后是否取得胜利
        */
        function checkLine(a) {

            // 每一行最小的index
            let minIndex = parseInt(a / 15) * 15
            // 每一行最大的index
            let maxIndex = parseInt(a / 15) * 15 + 14
            // 左边(上面)的计数器
            let leftCount = 0
            // 右边(下面)的计数器
            let rightCount = 0

            // 判断每一行是否有五个
            for (i = a - 1; i >= minIndex; i--) {
                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }

                leftCount++
            }
            for (i = a + 1; i <= maxIndex; i++) {
                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }
                rightCount++
            }
            if (leftCount + rightCount >= 4) {
                return true
            }

            // 计数器清零
            leftCount = 0
            rightCount = 0

            // 判断每一列是否有五个
            for (i = a + 15; i <= 224; i += 15) {

                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }
                rightCount++
            }

            for (i = a - 15; i >= 0; i -= 15) {
                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }
                leftCount++
            }
            if (leftCount + rightCount >= 4) {
                return true
            }

            // 计数器清零
            leftCount = 0
            rightCount = 0

            // 判断左上角到右下角的连线情况
            for (i = a + 16; i <= 224; i += 16) {
                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }
                rightCount++
            }
            for (i = a - 16; i >= 0; i -= 16) {
                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }
                leftCount++
            }
            if (leftCount + rightCount >= 4) {
                return true
            }

            // 计数器清零
            leftCount = 0
            rightCount = 0

            // 判断右上角到左下角的连线情况
            for (i = a + 14; i <= 224; i += 14) {
                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }
                rightCount++
            }
            for (i = a - 14; i >= 0; i -= 14) {
                if (squares[i].children.length === 0 || squares[i].children[0].classList[1] !== squares[a].children[0].classList[1]) {
                    break
                }
                leftCount++
            }
            if (leftCount + rightCount >= 4) {
                return true
            }

            return false


        }

        function illegalIndex(a) {
            let row = parseInt(a / 15)
            let col = a % 15
            if (row < 0 || row > 14) {
                return false
            }
            if (col < 0 || col > 14) {
                return false
            }
            return true
        }


        /**
         * 宣布胜利的函数
        */
        function announce() {
            if (currentPlayer === 'black') {
                alert('白棋获胜')
            } else {
                alert('黑棋获胜')
            }
        }


    </script>
</body>
</html>